<template>
  <div class="User">
    <div class="operation_list">
      <logo class="logo"></logo>
      <ul class="list_box">
        <li v-for="(item,index) in Operation_list" :key="index">
          <router-link active-class="active" :to="item.href">
            <svg class='icon' aria-hidden='true'>
              <use :xlink:href='item.icon'></use>
            </svg>
            {{item.title}}
          </router-link>
        </li>
      </ul>
    </div>
    <div @click="offMobeView" class="user_view" v-if="$store.state.isLogin">
      <div class="mobe_btn" @click.stop="extend">
        <span>个人中心</span>
        <svg class='icon' aria-hidden='true'>
          <use xlink:href='#icon-kuozhan'></use>
        </svg>
      </div>
       <transition name="content">
          <keep-alive>
            <router-view></router-view>
          </keep-alive>
        </transition>
    </div>
  </div>
</template>

<script>
import Logo from '../components/header/logo.vue'
export default {
  name: 'User',

  data() {
    return {
      Operation_list:[ // 导航菜单
        {title: '个人信息', href: '/User/info',icon:"#icon-gerenxinxi"},
        {title: '我的文章', href: '/User/article',icon:'#icon-wenzhang'},
        {title: '我的话题', href: '/User/topics',icon: '#icon-chaojihuati'},
        {title: '我的收藏', href: '/User/collect',icon:'#icon-yishoucang'},
        {title: '好友关注', href: '/User/attention', icon:'#icon-jiaoyou'},
      ]
    };
  },
  components: {
    Logo
  },
  created(){
    this.init()
  },
  methods:{
    // 初始化
    init(){
      this.$api.toLogin().then(res => {
        if(res instanceof Object){
          this.$store.commit('getUserInfo', res)
        }else{
          this.$store.dispatch('showHint', {
            title: '登陆已过期,请先登陆',
            isFlag: false
          })
          this.$router.push('/')
        }
      })
    },
    // 移动端个人中心
    extend(){
      document.querySelector('.operation_list').classList.add('active')
    },
    offMobeView(){
      document.querySelector('.operation_list').classList.remove('active')
    }
  }
};
</script>

<style>
.User{
  width: 100%;
  display: flex;
  font-size: 0.8rem;
}
.operation_list{
  width: 20%;
  height: 100vh;
  background-color: rgba(1, 1, 65,.9);
  font-size: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 0;
}
.operation_list .list_box{
  width: 100%;
  margin-top: 30px;
}
.operation_list .list_box li a:hover,
.operation_list .list_box li .active{
  background-color: rgba(1, 1, 65,1);
  color: red;
}
.operation_list .list_box li a{
  height: 60px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all .3s;
}
.operation_list .list_box .icon{
  font-size: 1.5em;
}
.operation_list a{
  color: aliceblue;
}
.user_view{
  width: 80%;
  height: 100vh;
  overflow-y: scroll;
}

.title_nav{
  height: 40px;
  background-color: rgb(207, 207, 207);
  box-shadow: 0 0 5px gray;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;
}
.title_nav input{
  padding: 5px 10px;
  border-radius: 7px;
  background-color: rgb(36, 155, 36);
  color: white;
  margin: 0 10px;
  cursor: pointer;
  border: none;
}
.title_nav input:hover{
  opacity: 0.9;
}
.title_nav h3{
  white-space: nowrap;
}
.content .biaoti{
  display: flex;
  width: 100%;
  align-items: center;
  white-space: nowrap;
}
.content .biaoti input{
  display: inline-block;
  flex: 1;
  height: 30px;
  border: 1px solid gray;
  padding-left: 10px;
  margin-left: 10px;
  outline: none;
}
.mobe_btn{
  display: none;
}
.btn{
  cursor: pointer;
  background-color: #ececec;
  padding: 6px;
  margin-right: 4px;
  color: gray;
  border-radius: 5px;
  transition: all .3s;
  display: inline-block;
  line-height: 0;
}
.btn_blue:hover{
  background-color: blue;
  color: white;
}
.btn_red:hover{
  background-color: red;
  color: white;
}
.btn_green:hover{
  background-color: rgb(51, 255, 51);
  color: white;
}
svg.icon{
  font-size: 15px;
  vertical-align: text-top;
}

@media screen and (max-width: 800px){
  .operation_list{
    width: 200px;
    position: fixed;
    top: 0;
    left: -200px;
    z-index: 99;
    transition: all .3s ease;
  }
  .User .active{
    left: 0;
  }
  .user_view{
    width: 100%;
  }
  .topics_info ul li span:nth-child(3){
    display: none;
  }
  .topics_info ul li span:nth-child(2){
    flex: 1;
  }
  .mobe_btn{
    display: inline-block;
    font-size: 1.5rem;
    padding: 10px;
  }
  .mobe_btn .icon{
    font-size: 1.8rem;
    vertical-align: middle;
  }
  .oper span{
    display: none;
  }
}
</style>